<!DOCTYPE html>
<head>
    <title>长跑分屏成绩</title>
    <script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/layer/layer.js"></script>
    <style>
        .exam-tr-line:nth-child(2n){
            background: #ccc;
        }
    </style>
</head>
<body>
<div id="rrapp" v-cloak>
<!--    <div v-show="showList">-->
<!--        <div class="grid-btn">-->
<!--                <input type="text" class="form-control examDateCss" style="display: inline; width: 15%;" v-model="examDate" @keyup.enter="query" placeholder="日期">-->
<!--                <input type="text" class="form-control" style="display: inline; width: 15%;" v-model="q.studentCode" @keyup.enter="query" placeholder="编号">-->
<!--                <input type="text" class="form-control" style="display: inline; width: 15%;" v-model="q.name" @keyup.enter="query" placeholder="姓名">-->
<!--            &nbsp;&nbsp;&nbsp;<a class="btn btn-default" @click="query">查询</a>-->
<!--            <br/>-->
<!--        </div>-->
<!--        <table id="jqGrid"></table>-->
<!--        <div id="jqGridPager"></div>-->
<!--    </div>-->
    <table style="width: 100%;border-spacing:0">
        <thead style="width: 100%;">
            <tr style="width: 100%; background: #eee;">
                <th style="width: 18% ;font-size: 36px;text-align: center">日期</th>
                <th style="width: 18%;font-size: 36px;  text-align: center">编号</th>
                <th style="width: 10%;font-size: 36px;  text-align: center">姓名</th>
                <th style="width: 10%;font-size: 36px;  text-align: center">总圈</th>
                <th style="width: 14%;font-size: 36px;  text-align: center">已跑圈数</th>
                <th style="width: 14%;font-size: 36px;  text-align: center">耗时</th>
                <th style="width: 14%;font-size: 36px;  text-align: center">分数</th>
            </tr>
        </thead>
        <tbody style="width: 100%; position: fixed; top: 80px; bottom: 0;right: 0;left: 0; display: flex; align-content: space-between; flex-wrap: wrap;" id = "showTbodyId">

        </tbody>
    </table>

</div>

</body>
</html>
<script>
    window.setTimeout(reload, 200);
    function reload() {
        $.ajax({
            type:"GET",
            url:"${request.contextPath}/exam/middle/findAllLast?showNumber=5",
            dataType:"json",
            success:function(data){
                // debugger;
                if(data.data){
                    // alert(data.data);
                    $('#showTbodyId').empty();
                    $.each(data.data, function (e,value) {
                        var tdTemp = $("<tr class='exam-tr-line' style='width: 100%;font-size: 24px; display: flex; justify-content: space-between; align-items: center; height: 20%'></tr>")
                        tdTemp.append("<td style=\"width: 18%;font-size: 40px; text-align: center; \">" + formatValue(value.examDate) + "</td>");
                        tdTemp.append("<td style=\"width: 18%;font-size: 40px; text-align: center; \">" + formatValue(value.studentCode) + "</td>");
                        tdTemp.append("<td style=\"width: 10%;font-size: 40px; text-align: center; \">" + formatValue(value.name) + "</td>");
                        tdTemp.append("<td style=\"width: 10%;font-size: 40px; text-align: center; \">" + formatValue(value.totalCircle) + "</td>");
                        tdTemp.append("<td style=\"width: 14%; font-size: 40px;text-align: center;\">" + formatValue(value.circle) + "</td>");
                        tdTemp.append("<td style=\"width: 14%;font-size: 40px; text-align: center; \">" + formatValue(value.middleRun) + "</td>");
                        tdTemp.append("<td style=\"width: 14%;font-size: 40px; text-align: center; \">" + formatValue(value.middleRunScore) + "</td>");
                        tdTemp.appendTo("#showTbodyId");
                        tdTemp = null;
                    })
                    window.setTimeout(reload, 1000);
                }else{
                    window.setTimeout(reload, 1000);
                }
            },
            error:function(jqXHR){
                window.setTimeout(reload, 1000);
            }
        });
    }
    function formatValue(obj) {
        if (obj) {
            return obj;
        } else {
            return '';
        }
    }
</script>